﻿<!DOCTYPE HTML>
<html lang="en">
<head>
    <title id='Description'>Chart with alternating background colors</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdraw.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxchart.core.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>    

    <script type="text/javascript">
        $(document).ready(function () {
            var data = [
                { "month": "Jan", "min": -1.9, "max": 3.7, "avg": 0.2 },
                { "month": "Feb", "min": -0.9, "max": 5.9, "avg": 1.1 },
                { "month": "Mar", "min": 0.8, "max": 9.8, "avg": 4.9 },
                { "month": "Apr", "min": 4.1, "max": 13.9, "avg": 8.7 },
                { "month": "May", "min": 8.0, "max": 18.4, "avg": 13.1 },
                { "month": "Jun", "min": 11.3, "max": 22.2, "avg": 16.6 },
                { "month": "Jul", "min": 13.3, "max": 25.3, "avg": 18.4 },
                { "month": "Aug", "min": 13.0, "max": 24.4, "avg": 17.6 },
                { "month": "Sep", "min": 10.3, "max": 20.8, "avg": 14.3 },
                { "month": "Oct", "min": 6.6, "max": 14.9, "avg": 9.2 },
                { "month": "Nov", "min": 2.1, "max": 8.4, "avg": 4.2 },
                { "month": "Dec", "min": -0.5, "max": 4.5, "avg": 1.5 }
             ];

            var toolTipCustomFormatFn = function (value, itemIndex, serie, group, categoryValue, categoryAxis) {
                var dataItem = data[itemIndex];
                return '<DIV style="text-align:left"><b>Month: ' +
                        categoryValue + '</b><br />Min: ' +
                        dataItem.min + '°<br />Max: ' +
                        dataItem.max + '°<br />Average: ' +
                        dataItem.avg + '°</DIV>';
            };

            // prepare jqxChart settings
            var settings = {
                title: "Weather in Geneva, Switzerland",
                description: "Climatological Information about Geneva",
                enableAnimations: true,
                showLegend: true,
                padding: { left: 10, top: 5, right: 10, bottom: 5 },
                titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
                enableCrosshairs: true,
                source: data,
                colorScheme: 'scheme05',
                xAxis:
                {
                    textRotationAngle: 0,
                    dataField: 'month',
                    unitInterval: 1,
                    tickMarks: { 
                        visible: true,
                        step: 1,
                        color: '#888888'
                    },
                    gridLines: {
                        visible: true,
                        step: 1,
                        color: '#888888'
                    }
                },
                valueAxis:
                {
                    unitInterval: 5,
                    title: {text: 'Temperature [C]'},
                    tickMarks: {color: '#888888'},
                    minValue: -5,
                    maxValue: 30,
                    alternatingBackgroundColor: '#E5E5E5',
                    alternatingBackgroundColor2: '#F5F5F5',
                    alternatingBackgroundOpacity: 0.5
                },
                seriesGroups:
                    [
                        {
                            type: 'rangecolumn',
                            columnsGapPercent: 100,
                            toolTipFormatFunction: toolTipCustomFormatFn,
                            series: [
                                    { dataFieldTo: 'max', displayText: 'Temperature Range', dataFieldFrom: 'min', opacity: 1 }
                                ]
                        },
                        {
                            type: 'spline',
                            toolTipFormatFunction: toolTipCustomFormatFn,
                            series: [
                                    { dataField: 'avg', displayText: 'Average Temperature', opacity: 1, lineWidth: 2 }
                                ]
                        }

                    ]
            };

            $('#chartContainer').jqxChart(settings);

            var chart = $('#chartContainer').jqxChart('getInstance');

            $("#checkboxSwapAxis").jqxCheckBox({ width: 120, checked: false });
            $("#checkboxSwapAxis").on('change', function (event) {
                var swap = event.args.checked;

                for (var i = 0; i < chart.seriesGroups.length; i++)
                    chart.seriesGroups[i].orientation = swap ? 'horizontal' : 'vertical';

                chart.refresh();
            });

        });
    </script>
</head>
<body class='default'>
    <div id='chartContainer' style="width:850px; height:500px"></div>
    <div style='margin-top: 5px;' id='checkboxSwapAxis'>Swap X and Y axes</div>
</body>
</html>
